<template>
  <div>
    <nav-bar>
      <template v-slot:default>新用户注册</template>
    </nav-bar>
    <div style="padding-top: 50px;">
      <van-image
          width="10rem"
          height="5rem"
          fit="contain"
          src="https://ccidcdn.wkjc.cn/Fm1gFNCKS8Mhs8vVMRjzPqVhA4C2.png"
      />
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field
            v-model="name"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="email"
            name="邮箱"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请填写正确的邮箱格式' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="password_confirmation"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请填写一致的密码' }]"
        />
        <div style="margin: 16px;">
          <div class="link-login" @click="$router.push({path:'/login'})">
            已有账号，立即登录
          </div>
          <van-button round block type="info" color="#42b983" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import {ref,reactive,toRefs} from "vue";
import {register} from "network/user";
import { Notify,Toast } from 'vant';
import {useRouter} from 'vue-router';
export default {
  name: "Register",
  components:{
    NavBar
  },
  setup(){
    const router = useRouter();
    const userinfo = reactive({
      name:'',
      email:'',
      password:'',
      password_confirmation:''
    })
    const onSubmit = () =>{
      // console.log(111111);
      //先验证
      if(userinfo.password != userinfo.password_confirmation){
        Notify('两次密码不一致');
      }else{
        //再发送服务器
        register(userinfo).then(res=>{
          console.log(res);
          if(res.status == '201'){
            Toast('注册成功');
            setTimeout(()=>{
              router.push({path:'/login'});
            },1000);
          }
          userinfo.password_confirmation = '';
          userinfo.password = '';
        })
      }
    }
    return{
      ...toRefs(userinfo),
      onSubmit
    }
  }
}
</script>

<style scoped>
  .link-login{
    font-size: 16px;
    padding-bottom: 20px;
    color: #42b983;
    display: inline-block;
  }
</style>